<template>
  <div class="m-content-box">
    <router-link to="/system/wxAdvertising">
      <el-button class="set-order-edit" type="primary">返回</el-button>
    </router-link>
    <div class="wx-setting-box">
      <h3 class="normal-title">广告设置</h3>
      <div class="wx-setting-item">
        <p class="wx-setting-item-label">1. 微官网中显示广告模块</p>
        <div id="wxSettingItemDesc" class="wx-setting-item-desc">
          <el-radio v-model="radio" label="1">显示</el-radio>
          <el-radio v-model="radio" label="2">不显示</el-radio>
        </div>
      </div>
      <div id="detailBox" class="">
        <div class="wx-ad-setting-item clear" style="height: 44px;">
          <span class="wx-ad__label">链接</span>
          <div class="wx-ad__val"><input type="text" name="url" class="inp-464x34" placeholder="请输入链接"></div>
        </div>
        <div class="wx-ad-setting-item clear" style="height: 114px;">
          <span class="wx-ad__label">图片</span>
          <div class="wx-ad__val">
            <div class="goods-imgs clear">
              <div id="fileCover" class="goods-img__add-btn fl webuploader-container">
                <div class="webuploader-pick">
                  <span class="goods-img__add-inner">设置图片</span>
                </div>
                <div id="rt_rt_1i90ale29lg864mp941vgsri71" style="position: absolute; inset: 0px auto auto 0px; width: 78px; height: 80px; overflow: hidden;">
                  <input type="file" name="file" class="webuploader-element-invisible" accept="image/gif,image/jpeg,image/jpg,image/png">
                  <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);" /></div></div>
            </div>
            <div class="goods-imgs__tips">建议尺寸:750*1334像素</div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-form-footer-btns">
      <el-button type="primary">保存</el-button>
      <el-button type="info">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      radio: '1',
      checkList: ['干货技术', '瑜伽生活']
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [
			// 	{
			// 	name: '约课设置',
			// 	url: '/system/appointmentSettings',
			// 	pd: true
			// }, 
			{
				name: '头条设置',
				url: '/system/headlinesSettings',
				pd: true
			}, {
				name: '广告设置',
				url: '/system/wxAdvertising',
				pd: true
			}, {
				name: '会员自主请假',
				url: '/system/leaveSettings',
				pd: true
			}, {
				name: '卡售价显示设置',
				url: '/system/mcardPriceDisplaySettings',
				pd: true
			}]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 1
    })
  },
  methods: {
    getList() {
      this.listLoading = true

      this.listLoading = false
    },
    open(type) {
      if (type === 'add') {
        this.add_show = false
      }
      if (type === 'update') {
        this.update_show = false
      }
    }

  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px;
}
.wx-setting-box {
  position: relative;
  width: 840px;
  margin: 0 auto;
}
.wx-setting-item {
  margin-bottom: 2px;
  padding: 12px 15px;
  background: #f2f2f2;
}
.normal-title {
  position: relative;
  color: #787878;
  font-size: 12px;
  height: 22px;
}
.wx-setting-item-label {
  margin-bottom: 15px;
}
.m-form-footer-btns {
  padding: 40px 0;
  text-align: center;
}
.set-order-edit {
  position: absolute;
  right: 20px;
  top: 20px;
}
.wx-ad-setting-item {
  margin-bottom: 8px;
  padding: 5px 10px;
  background: #f2f2f2;
}

.clear {
  zoom: 1;
}
.wx-ad__label {
  float: left;
  width: 114px;
  line-height: 34px;
}
.wx-ad__val {
  float: left;
}
.inp-464x34 {
  width: 464px;
  height: 34px;
  border: 1px solid #d9d9d9;
  display: inline-block;
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
}
.goods-imgs {
  position: relative;
  height: 90px;
}
.goods-imgs__tips {
  color: #b8b8b8;
  line-height: 1;
}
.goods-img__add-btn {
  position: relative;
  margin-bottom: 10px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: #ffffff;
  font-size: 12px;
  color: #41c3a8;
  border: 1px solid #f2f2f2;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}
div {
  display: block;
  unicode-bidi: isolate;
}
.goods-img__add-inner {
  display: inline-block;
  padding-left: 20px;
  background: url(../../../public/img/icon-add-s.png) no-repeat left 3px center;
}
.wx-ad-setting-item {
  margin-bottom: 8px;
  padding: 5px 10px;
  background: #f2f2f2;
}
.webuploader-element-invisible {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
</style>
